import React, { Component } from 'react'
import Taro, { Current } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtListItem,AtAvatar  } from "taro-ui"
import {DepartmentAccordion} from '../../../components/layout/DepartmentAccordion'
import {api_get_department_by_hospital } from '../../../utils/api'

import './selectDeptByHosp.scss'

export default class selectDeptByHosp extends Component {

  constructor(){
    super(...arguments)
    this.state = {
      getting:false,
      loading:false,
      data:'',
    }
  }
  
  componentWillMount(){
    // 界面传参
    this.setState({
      name:Current.router.params.name,
      address:Current.router.params.address,
      hospital_id:Current.router.params.hospital_id,
      picture:Current.router.params.picture,
      getting:true
    })
    // 加载数据
    Taro.showLoading({
      title: '加载中',
    })
  }

  myRequest =  () => {
    const department_params = {
      url: api_get_department_by_hospital,
      data: {
        hospital_id:this.state.hospital_id
      },
      method: 'POST',
      header: {'content-type': 'application/x-www-form-urlencoded'},
      success: (res) => {
        this.setState({
          data:res.data,
          loading:true
        }) 
      },
      fail: (res) => {console.log(res.data)}
    }
    Taro.request(department_params)
  }

  render () {
    if (this.state.getting && !this.state.loading) {
      this.myRequest()
    }
    if(this.state.loading ){
      setTimeout(function () {Taro.hideLoading()}, 100)    
    }
    return (
      this.state.loading?
      <View className='selectHospital-page'>
        <AtAvatar image={this.state.picture}  className='hospital_image'></AtAvatar>
        <AtListItem title={this.state.name} note={this.state.address} className='name' />
        {this.state.data.map(
          (item) => {
            return(
              <DepartmentAccordion bigKind={item.bigKind} department={item.smallKind} 
                  hospital_id={this.state.hospital_id}>
              </DepartmentAccordion>
            )}
        )}
      </View>
      :<View></View>
    )
  }
}

